<script setup>
import analysis1 from './options/analysis1'
import analysis2 from './options/analysis2'

import { ref } from 'vue'
const activeName = ref('销售额')
</script>

<template>
  <div class="container">
    <!-- 统计 -->

    <el-row :gutter="20" class="total">
      <el-col :xs="24" :sm="12" :md="6" :xl="6">
        <el-card header="总销售额">
          <span class="icon totalSell">
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="money-collect"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M911.5 700.7a8 8 0 00-10.3-4.8L840 718.2V180c0-37.6-30.4-68-68-68H252c-37.6 0-68 30.4-68 68v538.2l-61.3-22.3c-.9-.3-1.8-.5-2.7-.5-4.4 0-8 3.6-8 8V763c0 3.3 2.1 6.3 5.3 7.5L501 910.1c7.1 2.6 14.8 2.6 21.9 0l383.8-139.5c3.2-1.2 5.3-4.2 5.3-7.5v-59.6c0-1-.2-1.9-.5-2.8zM512 837.5l-256-93.1V184h512v560.4l-256 93.1zM660.6 312h-54.5c-3 0-5.8 1.7-7.1 4.4l-84.7 168.8H511l-84.7-168.8a8 8 0 00-7.1-4.4h-55.7c-1.3 0-2.6.3-3.8 1-3.9 2.1-5.3 7-3.2 10.8l103.9 191.6h-57c-4.4 0-8 3.6-8 8v27.1c0 4.4 3.6 8 8 8h76v39h-76c-4.4 0-8 3.6-8 8v27.1c0 4.4 3.6 8 8 8h76V704c0 4.4 3.6 8 8 8h49.9c4.4 0 8-3.6 8-8v-63.5h76.3c4.4 0 8-3.6 8-8v-27.1c0-4.4-3.6-8-8-8h-76.3v-39h76.3c4.4 0 8-3.6 8-8v-27.1c0-4.4-3.6-8-8-8H564l103.7-191.6c.6-1.2 1-2.5 1-3.8-.1-4.3-3.7-7.9-8.1-7.9z"
              ></path>
            </svg>
          </span>
          <span class="num"><NumScroll :value="33350" :time="1" /></span>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :xl="6">
        <el-card header="访问量">
          <span class="icon pv">
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="ie"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185zm174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312zm276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z"
              ></path>
            </svg>
          </span>
          <span class="num"><NumScroll :value="39911" :time="1" /></span>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :xl="6">
        <el-card header="总用户">
          <span class="icon totalUser">
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="user"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
              ></path>
            </svg>
          </span>
          <span class="num"><NumScroll :value="12211" :time="1" /></span>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :xl="6">
        <el-card header="今日新增">
          <span class="icon todayAdd">
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="user-add"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h.1c3 0 4.4-3.6 2.2-5.6a371.67 371.67 0 00-103.7-65.8c-.4-.2-.8-.3-1.2-.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-.4.2-.8.3-1.2.5-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 00-80.4 119.5A373.6 373.6 0 00137 888.8a8 8 0 008 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1a8.1 8.1 0 008.1.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4A171.2 171.2 0 01340.5 349c0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4A171.2 171.2 0 01683.9 349c0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
              ></path>
            </svg>
          </span>
          <span class="num"><NumScroll :value="12322" :time="1" /></span>
        </el-card>
      </el-col>
    </el-row>
    <!-- 统计 -->

    <!-- 柱状图 -->
    <el-row class="chart">
      <el-card>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="销售额" name="销售额" :lazy="false">
            <Chart class="analysis1" :option="analysis1" />
          </el-tab-pane>
          <el-tab-pane label="访问量" name="访问量" :lazy="false">
            <Chart class="analysis2" :option="analysis2" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
    <!-- 柱状图 -->
  </div>
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  .el-card,
  .el-card__body,
  .el-card__body,
  .el-tabs__content,
  .el-tab-pane {
    width: 100%;
    overflow: hidden;
  }
  .analysis1,
  .analysis2 {
    width: 100%;
    height: 500px;
  }
}
.total {
  .el-card {
    box-shadow: none !important;
    border: none;
    margin-bottom: 20px;
    :deep(.el-card__header) {
      border: none;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      padding: 10px;
    }

    .el-card__body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon {
      color: #fff;
      padding: 8px 10px;
      padding-bottom: 0px;
      border-radius: 50%;
      font-size: 30px;
    }

    .totalSell {
      background: #ff0067;
    }

    .pv {
      background: #098afb;
    }

    .totalUser {
      background: #000a01;
    }

    .todayAdd {
      background: #f90cff;
    }

    .num {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
      overflow: hidden;
      display: inline-block;
      margin-left: 10px;
      vertical-align: text-bottom;
      width: calc(100% - 80px);
    }
  }
}
</style>
